{% extends "management/base.html" %}
{% block title %}添加图书图片{% endblock %}

{% block content %}

<div class="container py-5">
  <div class="row justify-content-center">
    <div class="col-lg-8 col-md-10">

      <!-- 成功/失败提示 -->
      {% if state == 'success' %}
        <div class="alert alert-success text-center mb-4" role="alert">
          <h4 class="mb-0">✅ 添加成功</h4>
        </div>
      {% elif state == 'error' %}
        <div class="alert alert-danger text-center mb-4" role="alert">
          <h4 class="mb-0">❌ 添加失败，请检查信息</h4>
        </div>
      {% endif %}

      <!-- 上传图片表单 -->
      <form method="POST" enctype="multipart/form-data" novalidate>
        {% csrf_token %}

        <h2 class="text-center mb-4">添加图书图片</h2>

        <!-- 名称 -->
        <div class="mb-3">
          <label for="id_name" class="form-label">名称</label>
          <input type="text"
                 class="form-control"
                 id="id_name"
                 name="name"
                 placeholder="例如：封面图、插图1"
                 required
                 autofocus>
          <div class="invalid-feedback">请输入图片名称</div>
        </div>

        <!-- 描述 -->
        <div class="mb-3">
          <label for="id_description" class="form-label">描述</label>
          <input type="text"
                 class="form-control"
                 id="id_description"
                 name="description"
                 placeholder="简要说明图片内容"
                 required>
          <div class="invalid-feedback">请输入描述</div>
        </div>

        <!-- 所属书籍 -->
        <div class="mb-3">
          <label for="id_book" class="form-label">所属书籍</label>
          <select class="form-select" id="id_book" name="book" required>
            <option value="" disabled selected>请选择一本书</option>
{#  view 视图函数直接返回 booklist 你就可以接受的到  #}
            {% for book in book_list %} 
              <option value="{{ book.id }}">{{ book.name }}</option>
            {% endfor %}
          </select>
          <div class="invalid-feedback">请选择一本书</div>
        </div>

        <!-- 图片上传 -->
        <div class="mb-3">
          <label for="id_img" class="form-label">图片文件</label>
          <input class="form-control"
                 type="file"
                 id="id_img"
                 name="img"
                 accept="image/*"
                 required>
          <div class="form-text text-muted">
            支持格式：JPG, PNG, GIF 等常见图片格式
          </div>
          <div class="invalid-feedback">请上传图片文件</div>
        </div>

        <!-- 提交按钮 -->
        <div class="d-grid gap-2 mt-4">
          <button type="submit" class="btn btn-primary btn-lg">
            提交上传
          </button>
        </div>

      </form>
    </div>
  </div>
</div>

<!-- 启用 Bootstrap 5 表单校验 -->
<script>
  (function () {
    'use strict';
    const forms = document.querySelectorAll('form');
    Array.from(forms).forEach(form => {
      form.addEventListener('submit', function (event) {
        if (!form.checkValidity()) {
          event.preventDefault();
          event.stopPropagation();
        }
        form.classList.add('was-validated');
      }, false);
    });
  })();
</script>

{% endblock %}